<template>
	<view class="pad-10">
		<!-- 医技预约页面 -->
		<view class="item">
			<view class="item-name">{{item.name}}</view>
			<view class="divider"></view>
			<view class="book-row border">
				<view class="label">检查项目 ：</view>
				<view class="value right">{{ item.name }}</view>
			</view>
			<view class="book-row border">
				<view class="label">就诊人 ：</view>
				<view class="value right">{{ item.patName }}</view>
			</view>
			<view class="book-row border">
				<view class="label">就诊科室 ：</view>
				<view class="value right">{{ item.departmentName }}</view>
			</view>
			<view class="book-row border">
				<view class="label">就诊位置 ：</view>
				<view class="value right vital">{{ item.departmentAddress }}</view>
			</view>
			<view class="book-row border">
				<view class="label">检查室 ：</view>
				<view class="value right">{{ item.execDeptName }}</view>
			</view>
		</view>
		<view class="date">
			<view class="border-col">选择预约日期</view>
			<view class="between center mar-10-0">
				<view>预约日期</view>
				<view class="color-gray" @click="show=true">请选择 ></view>
			</view>
			<view v-if="item.visitTime">您的预约日期为：{{item.visitTime}}</view>
		</view>
		<button class="btn-confirm" @click="openDialog">{{item.id?'确定修改':'确定预约'}}</button>
		<u-calendar v-model="show" :mode="mode" @change="changeDate" :min-date="minDate" :max-date="maxDate"
			toolTip="选择预约日期"></u-calendar>
		<DialogVue :show="showDialog" @close="showDialog=false" @confirm="confirm">
			<view class="text-center">
				<view>确认预约？</view>
				<view class="color-red">{{item.visitTime}}</view>
			</view>
		</DialogVue>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	import {
		dateFormat
	} from '../../../utils/assist'
	import TabVue from "@/components/Tabs/index.vue"
	import DialogVue from '../../../components/Dialog/Dialog.vue'
	import {
		selfBillingAdd,
		selfBillingUpdate
	} from '../../../api/selfBilling'
	export default {
		components: {
			TabVue,
			DialogVue
		},
		data() {
			return {
				item: {},
				selectedTimeRange: "请选择",
				show: false,
				showDialog: false,
				mode: 'date',
				minDate: dateFormat("yyyy-MM-dd", new Date()),
			}
		},
		computed: {
			...mapGetters([
				'userInfo'
			]),
			maxDate() {
				let date = new Date();
				date.setDate(date.getDate() + 10)
				return dateFormat("yyyy-MM-dd", date)
			}
		},
		onLoad(e) {
			this.item = JSON.parse(e.item)
			this.item.patId = this.userInfo.patId
			this.item.patName = this.userInfo.patName;
			if (!this.item.campusCode) {
				this.item.campusCode = this.userInfo.campusCode
				this.item.campusName = this.userInfo.campusName
			}
		},
		methods: {
			changeDate(e) {
				console.log(e)
				this.item.visitTime = e.result
				console.log(this.item)
			},
			openDialog() {
				if (!this.item.visitTime) {
					this.$refs.uToast.show({
						title: '请选择预约日期',
						type: 'warning',
					})
					return
				}
				this.showDialog = true
			},
			confirm() {

				this.showDialog = false
				let obj = {
					patId: this.userInfo.patId,
					patName: this.userInfo.patName,
					...this.item
				}
				let objJson = {
					activeTab: 'history'
				}
				if (this.item.id) {
					selfBillingUpdate(obj).then(res => {
						uni.navigateTo({
							url: "/pages/Home/ServePatient/SelfBilling?item=" + JSON.stringify(objJson)
						})
					})
				} else {
					selfBillingAdd(obj).then(res => {
						uni.navigateTo({
							url: "/pages/Home/ServePatient/SelfBilling?item=" + JSON.stringify(objJson)
						})
					})
				}


			}

		}
	}
</script>

<style scoped>
	@import './components/Technology/card.scss';

	.item {
		background-color: white;
		border-radius: 10px;
		padding: 10px;

		.item-name {
			font-weight: bold;
			font-size: 20px;
			text-align: center;
			padding: 10px;
		}

		.divider {
			height: 1rpx;
			border-top: 1rpx dashed #e0e0e0;
			margin: 18rpx 0 18rpx 0;
			width: 100%;
		}

		.title {
			color: gray;
		}
	}

	.date {
		background-color: white;
		margin: 10px 0;
		border-radius: 10px;
		padding: 10px;

		.border-row {
			width: 100%;
			height: 1px;
			border: 1px solid rgb(221, 227, 229);
			margin: 10px 0;
		}
	}
</style>